<template>
  <div class="tip mgl30 pd16" style="width: 300px">
    <div class="flex-row-center-between mgt5 mgb5">
      <span class="dot">{{ props.monthGraphData.maxFaultCountItem?.dateString }}</span>
      <span class="grey-text">增长量最大</span>
    </div>
    <div class="flex-row-center-between mgt5 mgb5">
      <span class="dot">{{ props.monthGraphData.minFaultCountItem?.dateString }}</span>
      <span class="grey-text">增长量最小</span>
    </div>
    <div class="flex-row-center-between mgt5 mgb5">
      <span class="dot">{{ props.monthGraphData.maxYoyBasisItem?.dateString }}</span>
      <span class="grey-text">同比增长率最大</span>
    </div>
    <div class="flex-row-center-between mgt5 mgb5">
      <span class="dot">{{ props.monthGraphData.minYoyBasisItem?.dateString }}</span>
      <span class="grey-text">同比增长率最小</span>
    </div>
    <div class="flex-row-center-between mgt5 mgb5">
      <span class="dot">{{ props.monthGraphData.maxMomRatioItem?.dateString }}</span>
      <span class="grey-text">环比增长率最大</span>
    </div>
    <div class="flex-row-center-between mgt5 mgb5">
      <span class="dot">{{ props.monthGraphData.minMomRatioItem?.dateString }}</span>
      <span class="grey-text">环比增长率最小</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    monthGraphData: {
      type: Object,
      default: () => ({
        dateString: ''
      })
    }
  })
</script>

<style scoped lang="less">
  .tip {
    background-color: #f6f7fb;
    .dot::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #6898f7;
      margin-right: 10px;
    }
  }
</style>
